{% extends './template.html' %}
{% load static %}

{% block content %}
      <div class="container-fluid"> 
          <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-6">
              <div class="card card-stats">
                <div class="card-header card-header-icon">
                  <div class="card-icon bg-primary">
                    <i class="material-icons">content_copy</i>
                  </div>
                  <small style="color:#333;" class="actu_date">22 Jan 2024</small>
                  <p class="card-category">Ventes</p>
                  <h3 class="card-title">
                    <small>{{nb_ventes}}</small>
                  </h3>
                </div>
                <div class="card-footer">
                  <div class="stats">
                    <a href="/solds/" class="text-primary2">Voir l'Historique des Ventes</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
              <div class="card card-stats">
                <div class="card-header  card-header-icon">
                  <div class="card-icon bg-primary">
                    <i class="material-icons">attach_money</i>
                  </div>
                  <small class="actu_date" style="color:#333;">22 Jan 2024</small>
                  <p class="card-category">Revenu</p>
                  <h4 class="card-title"><small style="font-weight: bold;">{{benefice}} XAF</small></h4>
                </div>
                <div class="card-footer">
                  <div class="stats">
                    <a href="/compta/" class="text-primary2">Voir la Fiche de Comptabilite</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
              <div class="card card-stats">
                <div class="card-header card-header-icon">
                  <div class="card-icon bg-primary">
                    <i class="material-icons">face</i>
                  </div>
                  <p class="card-category">Personnel</p>
                  <h3 class="card-title">{{staff}}</h3>
                </div>
                <div class="card-footer">
                  <div class="stats">
                    <a href="/RH/" class="text-primary2">Voir les Fiches de Personnel</a>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-lg-3 col-md-6 col-sm-6">
              <div class="card card-stats">
                <div class="card-header card-header-icon">
                  <div class="card-icon bg-primary">
                    <i class="material-icons">savings</i>
                  </div>
                  <!-- <small style="color:red;">Rupture </small> -->
                  <p class="card-category">Produits</p>
                  <h3 class="card-title">+{{produits}}</h3>
                </div>
                <div class="card-footer">
                  <div class="stats">
                    <a href="/stock/" class="text-primary2">Voir les Fiches de Produit</a>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-lg-3 col-md-6 col-sm-6">
              <div class="card card-stats">
                <div class="card-header card-header-icon">
                  <div class="card-icon bg-primary">
                    <i class="material-icons">favorite</i>
                  </div>
                  <small style="color:green;">+ 2 nouveaux </small>
                  <p class="card-category">Clients</p>
                  <h3 class="card-title">1304</h3>
                </div>
                <div class="card-footer">
                  <div class="stats">
                    <a href="/stock/" class="text-primary2">Voir la liste des Clients </a>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
              <div class="card card-stats">
                <div class="card-header card-header-icon">
                  <div class="card-icon bg-primary">
                    <i class="material-icons">list</i>
                  </div>
                  <small style="color:green;">+ 1 nouveau</small>
                  <p class="card-category">Partenaires</p>
                  <h3 class="card-title">6</h3>
                </div>
                <div class="card-footer">
                  <div class="stats">
                    <a href="/stock/" class="text-primary2">Voir la liste des Partenaires </a>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6">
              <div class="card card-stats">
                <div class="card-header card-header-icon">
                  <div class="card-icon bg-primary">
                    <i class="material-icons">bookmark_added</i>
                  </div>

                    <small class="text-secondary">Ravitaillement</small>
                  <p class="card-category text-danger">Epuisé</p>
                  <h3 class="card-title">0</h3>
                </div>
                <div class="card-footer">
                  <div class="stats">
                    <a href="/stock/" class="text-primary2">Voir les Infos sur le Ravitaillement </a>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-lg-3 col-md-6 col-sm-6">
              <div class="card card-stats">
                <div class="card-header card-header-primary2 card-header-icon">
                  <div class="card-icon bg-primary">
                    <i class="material-icons">pix</i>
                  </div>
                  <p class="card-category">Transactions</p>
                  <h3 class="card-title">+3</h3>
                </div>
                <div class="card-footer">
                  <div class="stats">
                    <i class="material-icons">update</i> Voir toutes les Transactions
                  </div>
                </div>
              </div>
            </div>            
          </div>
          <small>Graphiques de l'Activité</small>
          <div class="row">
            <div class="col-md-6 col-12">
              <div class="card card-chart">
                <div class="card-header   text-white">
                  <canvas class="ct-charts" style="color:white;min-height:150px;" id="dailySalesChart"></canvas>
                </div>
                <div class="card-body">
                  <h4 class="card-title">Bilan Comptable</h4>
                  <p class="card-category">
                    <span class="text-success"><i class="fa fa-long-arrow-up"></i> 90% </span> increase in today sales.</p>
                </div>
                <div class="card-footer">
                  <div class="stats">
                    <i class="material-icons">access_time</i> updated 3 days ago
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="card card-chart">
                <div class="card-header card-header-light">
                  <canvas class="ct-chart" id="websiteViewsChart"></canvas>
                </div>
                <div class="card-body">
                  <h4 class="card-title">Rapports des Ventes</h4>
                  <p class="card-category">Last Campaign Performance</p>
                </div>
                <div class="card-footer">
                  <div class="stats">
                    <i class="material-icons">access_time</i> campaign sent 2 hours ago
                  </div>
                </div>
              </div>
            </div>
         <div class="col-md-6">
              <div class="card card-chart">
                <div class="card-header card-header-light">
                  <canvas class="ct-chart" id="popuViewsChart"></canvas>
                </div>
                <div class="card-body">
                  <h4 class="card-title">Popularite des Produits</h4>
                  <p class="card-category">Last Campaign Performance</p>
                </div>
                <div class="card-footer">
                  <div class="stats">
                    <i class="material-icons">access_time</i> campaign sent 2 hours ago
                  </div>
                </div>
              </div>
            </div>            
            <div class="col-md-6">
              <div class="card card-chart">
                <div class="card-header card-header-light">
                  <canvas class="ct-chart" id="completedTasksChart"></canvas>
                </div>
                <div class="card-body">
                  <h4 class="card-title">Activité de La Clientele</h4>
                  <p class="card-category">Last Campaign Performance</p>
                </div>
                <div class="card-footer">
                  <div class="stats">
                    <i class="material-icons">access_time</i> campaign sent 2 days ago
                  </div>
                </div>
              </div>
            </div>
          </div> 
      </div>
{% endblock %}
{% block script %}
<script>
const ctx = document.getElementById('dailySalesChart');
new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      datasets: [{
        label: 'Ventes de la Semaine',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
});

const ctx2 = document.getElementById('websiteViewsChart');
new Chart(ctx2, {
    type: 'line',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
});

const ctx3 = document.getElementById('completedTasksChart');
new Chart(ctx3, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        axis: 'y',
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      indexAxis: 'y',
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
});

const ctx4 = document.getElementById('popuViewsChart');
new Chart(ctx4, {
    type: 'pie',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        axis: 'y',
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      indexAxis: 'y',
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
});

</script>
{% endblock %}